0x01. AirBnB clone - Web static
- Weight: 1
- Project over - took place from Oct 19, 2023 6:00 AM to Oct 24, 2023 6:00 AM
- Manual QA review was done on Mar 6, 2023 9:39 AM
Background Context
Web static, what?
Now that you have a command interpreter for managing your AirBnB objects, it’s time to make them alive!
Before developing a big and complex web application, we will build the front end step-by-step.
The first step is to “design” / “sketch” / “prototype” each element:
- Create simple HTML static pages
- Style guide
- Fake contents
- No Javascript
- No data loaded from anything
During this project, you will learn how to manipulate HTML and CSS languages. HTML is the structure of your page, it should be the first thing to write. CSS is the styling of your page, the design. I really encourage you to fix your HTML part before starting the styling. Indeed, without any structure, you can’t apply any design.
Before starting, please fork or clone the repository AirBnB_clone
from your partner if you were not the owner of the previous project.
Resources
Read or watch:
- Learn to Code HTML & CSS (until “Creating Lists” included)
- Inline Styles in HTML
- Specifics on CSS Specificity
- CSS SpeciFishity
- Introduction to HTML
- CSS
- MDN
- center boxes
Learning Objectives
At the end of this project, you are expected to be able to explain to anyone, without the help of Google:
General
- What is HTML
- How to create an HTML page
- What is a markup language
- What is the DOM
- What is an element / tag
- What is an attribute
- How does the browser load a webpage
- What is CSS
- How to add style to an element
- What is a class
- What is a selector
- How to compute CSS Specificity Value
- What are Box properties in CSS
Copyright - Plagiarism
- You are tasked to come up with solutions for the tasks below yourself to meet with the above learning objectives.
- You will not be able to meet the objectives of this or any following project by copying and pasting someone else’s work.
- You are not allowed to publish any content of this project.
- Any form of plagiarism is strictly forbidden and will result in removal from the program.
Requirements
General
- Allowed editors:
vi,vim,emacs - All your files should end with a new line
- A
README.mdfile, at the root of the folder of the project, is mandatory - Your code should be W3C compliant and validate with W3C-Validator
- All your CSS files should be in
stylesfolder - All your images should be in
imagesfolder - You are not allowed to use
!importantandid(#...in the CSS file) - You are not allowed to use tags
img,embedandiframe - You are not allowed to use Javascript
- Current screenshots have been done on
Chrome 56or more. - No cross browsers
- You have to follow all requirements but some
margin/paddingare missing - you should try to fit as much as you can to screenshots
More Info
Quiz questions
Question #0
Is following CSS syntax valid?
body {
color: #FF0000;
}
Question #1
Is the following HTML markup valid?
<html>
<head>
</head>
<body>
<img src="logo.png" />
</body>
</html>
(elements are correctly tagged, we don’t care about
!Doctype here)
Tips:
<img /> is an empty element
Question #2
Is following CSS syntax valid?
body {
color: #FF0000;
}
h3,
div.full_text,
div.small_text h4,
div.filters p.title {
font-size: 20px;
}
Question #3
In the following code, is the text Best School red?
css:
h1 .my_title {
color: green;
}
.my_title {
color: red;
}
html:
<h1>
<span class="my_title">Best School</span>
</h1>
Tips:
Question #4
In the following code, is the text Best School red?
css:
h2 {
color: red;
}
html:
<h1>Best School</h1>
Question #5
Is following CSS syntax valid?
body {
color: #FF0000;
}
* {
font-size: 14px;
}
Tips:
Question #6
Is following CSS syntax valid?
body {
color: #FF0000;
}
* {
font-size: 14px;
font-weight: 400
text-align: center;
}
Tips:
Betty for CSS!
Question #7
Is following CSS syntax valid?
body {
color: #FF0000;
}
h3,
div.full_text
div.small_text h4
div.filters p.title {
font-size: 20px;
}
Tips:
, separates multiple selector, without it’s specific
selector
Question #8
Is following CSS syntax valid?
body {
color: #FF0000;
}
h1.title {
font-size: 16px;
}
Question #9
Is following CSS syntax valid?
body {
color: #FF0000;
}
* {
font-size: 14px;
text-align: center;
margin: 30px 12px 4px;
}
Tips:
margin and padding support 4 different
syntaxes: margin
Question #10
Is the following HTML markup valid?
<html>
<head>
</head>
<body>
<h1>Best <b>School</h1></b>
</body>
</html>
(elements are correctly tagged, we don’t care about
!Doctype here)
Tips:
“Always close something before opening a new thing”
Question #11
Is following CSS syntax valid?
body {
color: #FF0000;
}
div.filters p.title h2 span.text.big {
font-size: 20px;
}
Question #12
In the following code, is the text Best School red?
css:
h1 {
color: red;
}
html:
<h1>Best School</h1>
Question #13
Is the following HTML markup valid?
<html>
<head>
</head>
<body>
<h1>
<a href="www.google.com">Go to <b>Google</b>
</h1>
</body>
</html>
(elements are correctly tagged, we don’t care about
!Doctype here)
Question #14
In the following code, is the text Best School red?
css:
h3 span.text,
h1,
div.title {
color: red;
}
html:
<h1>Best School</h1>
Question #15
Is the following HTML markup valid?
<html>
<head>
</head>
<body>
<body>
</html>
(elements are correctly tagged, we don’t care about
!Doctype here)
Tips:
Each HTML tag must be closed
Question #16
In the following code, is the text Best School red?
css:
h1.title {
color: red;
}
html:
<h1>Best School</h1>
Question #17
Is the following HTML markup valid?
<html>
<head>
</head>
<body>
</body>
</html>
(elements are correctly tagged, we don’t care about
!Doctype here)
Question #18
In the following code, is the text Best School red?
css:
h1 div.title {
color: red;
}
html:
<h1>Best School</h1>
Question #19
Is following CSS syntax valid?
body {
color: #FF0000;
}
div.filters h2 {
font-size: 16px;
}
Question #20
In the following code, is the text Best School red?
css:
h1 {
color: green;
}
span.my_title {
color: red;
}
html:
<h1>
<span class="my_title">Best School</span>
</h1>
Tips:
Question #21
Is following CSS syntax valid?
body {
color: #FF0000;
}
* {
font-size: 14px;
text-align: center;
h1 {
margin: 30px;
}
}
Tips:
CSS vs SCSS
Question #22
Is the following HTML markup valid?
<html>
<head>
</head>
<body>
<h1>
<a href="www.google.com'>Google</a>
</h1>
</body>
</html>
(elements are correctly tagged, we don’t care about
!Doctype here)
Tips:
Number of quotes is important!
Question #23
Is the following HTML markup valid?
<html></html>
(elements are correctly tagged, we don’t care about
!Doctype here)
Tasks
0. Inline styling
Write an HTML page that displays a header and a footer.
Layout:
- Body:
- no margin
- no padding
- Header:
- color #FF0000 (red)
- height: 70px
- width: 100%
- Footer:
- color #00FF00 (green)
- height: 60px
- width: 100%
- text
Best Schoolcenter vertically and horizontally - always at the bottom at the page
Requirements:
- You must use the
headerandfootertags - You are not allowed to import any files
- You are not allowed to use the
styletag in theheadtag - Use inline styling for all your tags
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
0-index.html
1. Head styling
Write an HTML page that displays a header and a footer by using the
style tag in the head tag (same as
0-index.html)
Requirements:
- You must use the
headerandfootertags - You are not allowed to import any files
- No inline styling
- You must use the
styletag in theheadtag
The layout must be exactly the same as 0-index.html
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
1-index.html
2. CSS files
Write an HTML page that displays a header and a footer by using CSS files
(same as 1-index.html)
Requirements:
- You must use the
headerandfootertags - No inline styling
- You must have 3 CSS files:
styles/2-common.css: for global style (i.e. thebodystyle)styles/2-header.css: for header stylestyles/2-footer.css: for footer style
The layout must be exactly the same as 1-index.html
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
2-index.html, styles/2-common.css, styles/2-header.css, styles/2-footer.css
3. Zoning done!
Write an HTML page that displays a header and footer by using CSS files (same
as 2-index.html)
Layout:
- Common:
- no margin
- no padding
- font color: #484848
- font size: 14px
- font family:
Circular,"Helvetica Neue",Helvetica,Arial,sans-serif; - icon in the browser tab
- Header:
- color: white
- height: 70px
- width: 100%
- border bottom 1px #CCCCCC
- logo align on left and center vertically (20px space at the left)
- Footer:
- color white
- height: 60px
- width: 100%
- border top 1px #CCCCCC
- text
Best Schoolcenter vertically and horizontally - always at the bottom at the page
Requirements:
- No inline style
- You are not allowed to use the
imgtag - You are not allowed to use the
styletag in theheadtag - All images must be stored in the
imagesfolder - You must have 3 CSS files:
styles/3-common.css: for the global style (i.ebodystyle)styles/3-header.css: for the header stylestyles/3-footer.css: for the footer style
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
3-index.html, styles/3-common.css, styles/3-header.css, styles/3-footer.css, images/
4. Search!
Write an HTML page that displays a header, footer and a filters box with a search button.
Layout: (based on 3-index.html)
- Container:
- between
headerandfootertags, add adiv:- classname:
container - max width 1000px
- margin top and bottom 30px - it should be 30px under the
bottom of the
header(screenshot) - center horizontally
- classname:
- between
- Filter section:
- tag
section - classname
filters - inside the
.container - color white
- height: 70px
- width: 100% of the container
- border 1px #DDDDDD with radius 4px
- tag
- Button search:
- tag
button - text
Search - font size: 18px
- inside the section filters
- background color #FF5A5F
- text color #FFFFFF
- height: 48px
- width: 20% of the section filters
- no borders
- border radius: 4px
- center vertically and at 30px of the right border
- change opacity to 90% when the mouse is on the button
- tag
Requirements:
- You must use:
header,footer,section,buttontags - No inline style
- You are not allowed to use the
imgtag - You are not allowed to use the
styletag in theheadtag - All images must be stored in the
imagesfolder - You must have 4 CSS files:
styles/4-common.css: for the global style (bodyand.containerstyles)styles/3-header.css: for the header stylestyles/3-footer.css: for the footer stylestyles/4-filters.css: for the filters style
4-index.htmlwon’t be W3C valid, don’t worry, it’s temporary
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
4-index.html, styles/4-common.css, styles/3-header.css, styles/3-footer.css, styles/4-filters.css, images/
5. More filters
Write an HTML page that displays a header, footer and a filters box.
Layout: (based on 4-index.html)
- Locations and Amenities filters:
- tag:
div - classname:
locationsfor location tag andamenitiesfor the other - inside the section filters (same level as the
buttonSearch) - height: 100% of the section filters
- width: 25% of the section filters
- border right #DDDDDD 1px only for the first left filter
- contains a title:
- tag:
h3 - font weight: 600
- text
StatesorAmenities
- tag:
- contains a subtitle:
- tag:
h4 - font weight: 400
- font size: 14px
- text with fake contents
- tag:
- tag:
Requirements:
- You must use:
header,footer,section,button,h3,h4tags - No inline style
- You are not allowed to use the
imgtag - You are not allowed to use the
styletag in theheadtag - All images must be stored in the
imagesfolder - You must have 4 CSS files:
styles/4-common.css: for the global style (bodyand.containerstyles)styles/3-header.css: for the header stylestyles/3-footer.css: for the footer stylestyles/5-filters.css: for the filters style
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
5-index.html, styles/4-common.css, styles/3-header.css, styles/3-footer.css, styles/5-filters.css, images/
6. It's (h)over
Write an HTML page that displays a header, footer and a filters box with dropdown.
Layout: (based on 5-index.html)
- Update Locations and Amenities filters to display a contextual dropdown
when the mouse is on the filter
div:- tag
ul - classname
popover - text should be fake now
- inside each
div - not displayed by default
- color #FAFAFA
- width same as the
divfilter - border #DDDDDD 1px with border radius 4px
- no list display
- Location filter has 2 levels of
ul/li:- state -> cities
- state name must be display in a
h2tag (font size 16px)
- tag
Requirements:
- You must use:
header,footer,section,button,h3,h4,ul,litags - No inline style
- You are not allowed to use the
imgtag - You are not allowed to use the
styletag in theheadtag - All images must be stored in the
imagesfolder - You must have 4 CSS files:
styles/4-common.css: for the global style (bodyand.containerstyles)styles/3-header.css: for the header stylestyles/3-footer.css: for the footer stylestyles/6-filters.css: for the filters style
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
6-index.html, styles/4-common.css, styles/3-header.css, styles/3-footer.css, styles/6-filters.css, images/
7. Display results
Write an HTML page that displays a header, footer, a filters box with dropdown and results.
Layout: (based on 6-index.html)
- Add Places section:
- tag:
section - classname:
places - same level as the filters section, inside
.container - contains a title:
- tag:
h1 - text:
Places - align in the top left
- font size: 30px
- tag:
- contains multiple “Places” as listing (horizontal or vertical)
describe by:
- tag:
article - width: 390px
- padding and margin 20px
- border #FF5A5F 1px with radius 4px
- contains the place name:
- tag:
h2 - font size: 30px
- center horizontally
- tag:
- tag:
- tag:
Requirements:
- You must use:
header,footer,section,article,button,h1,h2,h3,h4,ul,litags - No inline style
- You are not allowed to use the
imgtag - You are not allowed to use the
styletag in theheadtag - All images must be stored in the
imagesfolder - You must have 5 CSS files:
styles/4-common.css: for the global style (i.e.bodyand.containerstyles)styles/3-header.css: for the header stylestyles/3-footer.css: for footer stylestyles/6-filters.css: for the filters stylestyles/7-places.css: for the places style
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
7-index.html, styles/4-common.css, styles/3-header.css, styles/3-footer.css, styles/6-filters.css, styles/7-places.css, images/
8. More details
Write an HTML page that displays a header, a footer, a filter box (dropdown list) and the result of the search.
Layout: (based on 7-index.html)
Add more information to a Place article:
- Price by night:
- tag:
div - classname:
price_by_night - same level as the place name
- font color: #FF5A5F
- border: #FF5A5F 4px rounded
- min width: 60px
- height: 60px
- font size: 30px
- align: the top right (with space)
- tag:
- Information section:
- tag:
div - classname:
information - height: 80px
- border: top and bottom #DDDDDD 1px
- contains (align vertically):
- tag:
- User section:
- tag:
div - classname:
user - text
Owner: <fake text> Ownertext should be in bold
- tag:
- Description section:
- tag:
div - classname:
description
- tag:
Requirements:
- You must use:
header,footer,section,article,button,h1,h2,h3,h4,ul,litags - No inline style
- You are not allowed to use the
imgtag - You are not allowed to use the
styletag in theheadtag - All images must be stored in the
imagesfolder - You must have 5 CSS files:
styles/4-common.css: for the global style (i.e.bodyand.containerstyles)styles/3-header.css: for the header stylestyles/3-footer.css: for the footer stylestyles/6-filters.css: for the filters stylestyles/8-places.css: for the places style
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
8-index.html, styles/4-common.css, styles/3-header.css, styles/3-footer.css, styles/6-filters.css, styles/8-places.css, images/
9. Full details
Write an HTML page that displays a header, footer, a filters box with dropdown and results.
Layout: (based on 8-index.html)
Add more information to a Place article:
- List of Amenities:
- tag
div - classname
amenities - margin top 40px
- contains:
- title:
- tag
h2 - text
Amenities - font size 16px
- border bottom #DDDDDD 1px
- tag
- list of amenities:
- tag
ul/li - no list style
- icons on the left: Pet friendly, TV, Wifi, etc… feel free to add more
- tag
- title:
- tag
- List of Reviews:
- tag
div - classname
reviews - margin top 40px
- contains:
- title:
- tag
h2 - text
Reviews - font size 16px
- border bottom #DDDDDD 1px
- tag
- list of review:
- tag
ul/li - no list style
- a review is described by:
h3tag for the user/date description (font size 14px). Ex: “From Bob Dylan the 27th January 2017”ptag for the text (font size 12px)
- tag
- title:
- tag
Requirements:
- You must use:
header,footer,section,article,button,h1,h2,h3,h4,ul,litags - No inline style
- You are not allowed to use the
imgtag - You are not allowed to use the
styletag in theheadtag - All images must be stored in the
imagesfolder - You must have 5 CSS files:
styles/4-common.css: for the global style (bodyand.containerstyles)styles/3-header.css: for the header stylestyles/3-footer.css: for the footer stylestyles/6-filters.css: for the filters stylestyles/100-places.css: for the places style
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
100-index.html, styles/4-common.css, styles/3-header.css, styles/3-footer.css, styles/6-filters.css, styles/100-places.css, images/
10. Flex
Improve the Places section by using Flexible boxes for all Place articles
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
101-index.html, styles/4-common.css, styles/3-header.css, styles/3-footer.css, styles/6-filters.css, styles/101-places.css, images/
11. Responsive design
Improve the page by adding responsive design to display correctly in mobile or small screens.
Examples:
- no horizontal scrolling
- redesign search bar depending of the width
- etc.
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
102-index.html, styles/102-common.css, styles/102-header.css, styles/102-footer.css, styles/102-filters.css, styles/102-places.css, images/
12. Accessibility
Improve the page by adding Accessibility support
Examples:
- Colors contrast
- Header tags
- etc.
Well done on completing this project! Let the world hear about this milestone achieved.
Repo:
- GitHub repository:
AirBnB_clone - Directory:
web_static - File:
103-index.html, styles/103-common.css, styles/103-header.css, styles/103-footer.css, styles/103-filters.css, styles/103-places.css, images/